<!-- 公共头部 pc -->
<template>
  <div>
    <div class="header_main">
      <div class="head_center wow slideInDown">
        <div class="logo">
          <img src="../../assets/logo.png">
        </div>
        <div class="nav">
          <ul>
            <li @click="navCli(item,i)"
                :class="{'head_active':i==navKey}"
                v-for="(item,i) in navList"
                :key="i">{{item.name}}</li>
          </ul>
        </div>
        <div class="solo">
          <ul class="clearBoth">
            <li @mouseover="ru"
                @mouseleave="chu">{{yuyan?'En':'中文'}}
              <div class="down" id="xiala">
                <p @click="tabYuan(!yuyan)">{{!yuyan?'En':'中文'}}</p>
              </div>
            </li>
            <li class="sol">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      navList: [
        {
          name: '语音识别',
          path: ''
        },
        {
          name: '语音合成',
          path: ''
        },
        {
          name: '自然语言理解',
          path: ''
        },
        {
          name: '图像视觉',
          path: ''
        },
        {
          name: '解决方案',
          path: ''
        },
        {
          name: '新闻资讯',
          path: ''
        },
        {
          name: '关于我们',
          path: ''
        }
      ],
      yuyan: true, // 语言显示
      navKey: null // 导航Key
    }
  },
  mounted () {

  },
  methods: {
    // 语言切换
    tabYuan (bol) {
      this.yuyan = bol
      document.getElementById('xiala').style.display = 'none'
    },
    // 导航
    navCli (item, index) {
      this.navKey = index
    },
    ru () {
      document.getElementById('xiala').style.display = 'block'
    },
    chu () {
      document.getElementById('xiala').style.display = 'none'
    }
  }
}
</script>
<style lang='less' scoped>
.centerBox {
  position: relative;
  background: #ffffff;
  border-radius: 0 0 5px 5px;
}
.logo {
  width: 196px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  img {
    object-fit: cover;
    cursor: pointer;
  }
}
.nav {
  line-height: 74px;
  width: 100%;
  padding: 0 121px 0 196px;
  box-sizing: border-box;
  margin-top: 0;
  ul {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      padding: 0 20px;
      color: #252525;
      font-size: 16px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      border-bottom: 2px solid rgba(0, 127, 255, 0);
      transition: 0.3s all;
      position: relative;
    }
    li:hover {
      color: #007fff;
      border-bottom: 2px solid rgba(0, 127, 255, 1);
    }
  }
}
.solo {
  width: 160px;
  position: absolute;
  top: 0;
  right: 0;
  ul {
    li {
      width: 20%;
      padding: 0 18px;
      line-height: 74px;
      float: left;
      color: #252525;
      position: relative;
      height: 74px;
      font-size: 16px;
      cursor: pointer;
    }
    li::after {
      content: "";
      display: block;
      width: 1px;
      height: 48px;
      position: absolute;
      top: 50%;
      right: 0;
      background: #bbbbbb;
      margin-top: -24px;
    }
    li:last-child::after {
      content: "";
      display: none;
    }
    li:hover {
      color: #007fff;
      .down {
        display: block;
      }
    }
  }
}
.sol::before {
  content: "";
  display: block;
  background: url("../../assets/solo.png");
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 18px;
  margin-top: -10px;
}
// 下拉
.down {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  color: #000;
  text-align: center;
  line-height: 40px;
  transition: 0.3s all;
  display: none;
  p:hover {
    background: #007fff;
    color: #fff;
  }
}
@media screen and (max-width: 1180px) {
  .nav {
    ul {
      li {
        padding: 0 14px;
        font-size: 14px;
      }
    }
  }
}
.header_main {
  width: 100%;
}
.head_center {
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  position: relative;
  background: #ffffff;
  border-radius: 0 0 5px 5px;
}
//***************************************** */
.head_active {
  color: #007fff !important;
  border-bottom: 2px solid rgba(0, 127, 255, 1)  !important;
}
</style>
